//Cell.js
import React, {Component} from 'react';
import CommData from "./commData";
import CommDataInput from "./commDataInput"

export default class CommCell extends Component {
    constructor(props) {
        super(props)
        this.state = {}
        // this.display = this.determineDisplay({ x: props.colNo, y: props.rowNo }, props.commValue)
        this.timer = 0
        this.delay = 200
        this.prevent = false
    }

    getCommData(valueObj, x, y, executeFormula,isThousandsFormat,isPercentageFormat,
                decimalPlace) {
        return <CommData valueObj={valueObj} x={x} y={y} executeFormula={executeFormula}
                isThousandsFormat={isThousandsFormat}
                isPercentageFormat={isPercentageFormat}
                decimalPlace={decimalPlace}
        />;
    }

    getCommDataInput(valueObj) {
        return <CommDataInput valueObj={valueObj} onChangedCell={this.onChangedCell}/>;
    }

    /**
     * Before updating, execute the formula on the Cell value to calculate the
     * `display` value. Especially useful when a redraw is pushed upon this cell
     * when editing another cell that this might depend upon
     */
    componentWillUpdate() {
        this.display = this.determineDisplay({x: this.props.colNo, y: this.props.rowNo}, this.props.commValue)
    }

    /**
     * Handle clicking a Cell.
     */
    clicked = (e) => {
        // Prevent click and double click to conflict
        e.persist();
        this.timer = setTimeout(() => {
            if (!this.prevent) {
                this.props.onClick(e);  //调用父方法   这个才是核心
                // Unselect all the other cells and set the current
                // Cell state to `selected`
                // this.emitUnselectAllEvent()
                // this.setState({ selected: true })
            }
            this.prevent = false
        }, this.delay)
    }

    /**
     * Handle doubleclicking a Cell.
     */
    doubleClicked = (e) => {
        // Prevent click and double click to conflict
        clearTimeout(this.timer)
        this.prevent = true
        this.props.onCellDoubleClick(e);  //调用父方法   这个才是核心
    }

    onChangedCell = (value) => {
        this.props.onChangedCell(value);  //调用父方法   这个才是核心
    }

    /**
     * Emits the `eventA` event, used to tell all the other cells to
     * handleeventA
     */
    emitAEvent = () => {
        const eventA = new Event('eventA')
        window.document.dispatchEvent(eventA)
    }
    /**
     * Executes the formula calculation on the cell value
     */
    determineDisplay = ({x, y}, valueObject) => {
        //if (valueObject.text.slice(0, 1) === '=') {
        if (valueObject.slice(0, 1) === '=') {
            //const res = this.props.executeFormula({ x, y }, valueObject.text.slice(1))
            const res = this.props.executeFormula({x, y}, valueObject.slice(1))
            if (res.error !== null) {
                return 'INVALID'
            }
            return res.result
        }
        //return valueObject.text
        return valueObject;
    }


    /**
     * Executes the formula calculation on the cell value
     */
    determineDisplayText = ({x, y}, valueText) => {
        if (valueText.slice(0, 1) === '=') {
            const res = this.props.executeFormula({x, y}, valueText.slice(1))
            if (res.error !== null) {
                return 'INVALID'
            }
            return res.result
        }
        return valueText
    }


    /**
     * Add listener to the `eventA` event used to broadcast the
     * eventA all event
     */
    componentDidMount() {
        window.document.addEventListener('eventA', this.handleeventA)
    }


    render() {
        let x = this.props.colNo;
        let y = this.props.rowNo;
        let executeFormula = this.props.executeFormula;
        let alignCss = this.props.commAlign === 1 ? 'cell_align_left' : (this.props.commAlign === 2 ? 'cell_align_center' : 'cell_align_right')
        let cell_font_family_css = 'cell_font-family_microYH';
        let cell_font_size_css = 'cell_font_size_medium'
        let cell_font_weight_css = 'font-normal'
        let cell_font_style_css = 'font-sytle_normal'
        //5、划线
        let cell_text_decoration_css = 'none'
        let cell_border_top_css = 'cell_border_top_init'
        let cell_border_bottom_css = 'cell_border_bottom_init'
        let cell_border_left_css = 'cell_border_left_init'
        let cell_border_right_css = 'cell_border_right_init'
        let cell_cell_filter_brightness_css = 'cell_filter_brightness_1'


        switch (this.props.commcell_font_cssArray[0]) {
            case 'microYH':
                cell_font_family_css = 'cell_font-family_microYH'
                break;
            case 'st':
                cell_font_family_css = 'cell_font-family_st'
                break;
            case 'xst':
                cell_font_family_css = 'cell_font-family_xst'
                break;
            case 'ht':
                cell_font_family_css = 'cell_font-family_ht'
                break;
            case 'fs':
                cell_font_family_css = 'cell_font-family_fs'
                break;
            case 'kt':
                cell_font_family_css = 'cell_font-family_kt'
                break;
            default:
                cell_font_family_css = 'cell_font-family_st'
        }

        switch (this.props.commcell_font_cssArray[1]) {
            case 'medium':
                cell_font_size_css = 'cell_font_size_medium'
                break;
            case 'small':
                cell_font_size_css = 'cell_font_size_small'
                break;
            case 'large':
                cell_font_size_css = 'cell_font_size_large'
                break;
            case 'x-small':
                cell_font_size_css = 'cell_font_size_x-small'
                break;
            case 'x-large':
                cell_font_size_css = 'cell_font_size_x-large'
                break;
            case 'xx-large':
                cell_font_size_css = 'cell_font_size_xx-large'
                break;
            default:
                cell_font_size_css = 'cell_font_size_medium'
        }

        switch (this.props.commcell_font_cssArray[2]) {
            case 'font-weight_normal':
                cell_font_weight_css = 'cell_font-weight_normal'
                break;
            case 'font-weight_bold':
                cell_font_weight_css = 'cell_font-weight_bold'
                break;
            default:
                cell_font_weight_css = 'cell_font-weight_normal'
        }


        switch (this.props.commcell_font_cssArray[3]) {
            case 'font-sytle_normal':
                cell_font_style_css = 'cell_font-style_normal'
                break;
            case 'font-sytle_italic':
                cell_font_style_css = 'cell_font-style_italic'
                break;
            default:
                cell_font_style_css = 'cell_font-style_normal'
        }


        switch (this.props.commcell_font_cssArray[4]) {
            case 'overline':
                cell_text_decoration_css = 'cell_font_text-decoration_overline'
                break;
            case 'line-through':
                cell_text_decoration_css = 'cell_font_text-decoration_line-through'
                break;
            case 'underline':
                cell_text_decoration_css = 'cell_font_text-decoration_underline'
                break;
            case 'blink':
                cell_text_decoration_css = 'cell_font_text-decoration_blink'
                break;
            case 'none':
                cell_text_decoration_css = 'cell_font_text-decoration_none'
                break;
            default:
                cell_font_style_css = 'cell_font_text-decoration_none'
        }

        switch (this.props.commborder_top) {
            case '0':
                cell_border_top_css = 'cell_border_top_init'
                break;
            case '1':
                cell_border_top_css = 'cell_border_top_none'
                break;
            case '2':
                cell_border_top_css = 'cell_border_top_thin'
                break;
            case '3':
                cell_border_top_css = 'cell_border_top_thick'
                break;

            case 0:
                cell_border_top_css = 'cell_border_top_init'
                break;
            case 1:
                cell_border_top_css = 'cell_border_top_none'
                break;
            case 2:
                cell_border_top_css = 'cell_border_top_thin'
                break;
            case 3:
                cell_border_top_css = 'cell_border_top_thick'
                break;


            default:
                cell_border_top_css = 'cell_border_top_init'
        }
        switch (this.props.commborder_bottom) {
            case '0':
                cell_border_bottom_css = 'cell_border_bottom_init'
                break;
            case '1':
                cell_border_bottom_css = 'cell_border_bottom_none'
                break;
            case '2':
                cell_border_bottom_css = 'cell_border_bottom_thin'
                break;
            case '3':
                cell_border_bottom_css = 'cell_border_bottom_thick'
                break;

            case 0:
                cell_border_bottom_css = 'cell_border_bottom_init'
                break;
            case 1:
                cell_border_bottom_css = 'cell_border_bottom_none'
                break;
            case 2:
                cell_border_bottom_css = 'cell_border_bottom_thin'
                break;
            case 3:
                cell_border_bottom_css = 'cell_border_bottom_thick'
                break;


            default:
                cell_border_bottom_css = 'cell_border_bottom_init'
        }
        // switch(this.props.commborder_bottom){
        //     case 0:
        //         cell_border_bottom_css= 'cell_border_bottom_init'
        //         break;
        //     case 1:
        //         cell_border_bottom_css= 'cell_border_tottom_none'
        //         break;
        //     case 2:
        //         cell_border_bottom_css= 'cell_border_tottom_thin'
        //         break;
        //     case 3:
        //         cell_border_bottom_css= 'cell_border_tottom_thick'
        //         break;
        //     default:
        //         cell_border_bottom_css='cell_border_tottom_init'
        // }

        switch (this.props.commborder_left) {
            case '0':
                cell_border_left_css = 'cell_border_left_init'
                break;
            case '1':
                cell_border_left_css = 'cell_border_left_none'
                break;
            case '2':
                cell_border_left_css = 'cell_border_left_thin'
                break;
            case '3':
                cell_border_left_css = 'cell_border_left_thick'
                break;


            case 0:
                cell_border_left_css = 'cell_border_left_init'
                break;
            case 1:
                cell_border_left_css = 'cell_border_left_none'
                break;
            case 2:
                cell_border_left_css = 'cell_border_left_thin'
                break;
            case 3:
                cell_border_left_css = 'cell_border_left_thick'
                break;


            default:
                cell_border_left_css = 'cell_border_left_init'
        }
        switch (this.props.commborder_right) {
            case '0':
                cell_border_right_css = 'cell_border_right_init'
                break;
            case '1':
                cell_border_right_css = 'cell_border_right_none'
                break;
            case '2':
                cell_border_right_css = 'cell_border_right_thin'
                break;
            case '3':
                cell_border_right_css = 'cell_border_right_thick'
                break;

            case 0:
                cell_border_right_css = 'cell_border_right_init'
                break;
            case 1:
                cell_border_right_css = 'cell_border_right_none'
                break;
            case 2:
                cell_border_right_css = 'cell_border_right_thin'
                break;
            case 3:
                cell_border_right_css = 'cell_border_right_thick'
                break;


            default:
                cell_border_right_css = 'cell_border_right_init'
        }

        switch (this.props.commaddFilter_bright) {
            case 0:
                cell_cell_filter_brightness_css = 'cell_filter_brightness_1'
                break;
            case 1:
                cell_cell_filter_brightness_css = 'cell_filter_brightness'
                break;
            default:
                cell_cell_filter_brightness_css = 'cell_filter_brightness_1'
        }
        let _rowSpan = 1;
        let _colSpan = 1;
        if (this.props.cell_struct_model != undefined  ) {
             _rowSpan = this.props.cell_struct_model[0];
             _colSpan = this.props.cell_struct_model[1];
        }else{
            console.log("%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%")
            console.log(this.props)
            console.log("%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%")
        }

        //alert(this.props.commcellBackgroundColor);
        console.log("this.props.commData:" + this.props.commValue.text + ";_rowSpan:" + _rowSpan + ";_colSpan:" + _colSpan);

        if (this.props.commData == 0) {
            return null;
        } else {

            if (this.props.commCell_editing_mode == 0) {
                return (

                    <td className="ttd"
                        onClick={e => this.clicked(e)}
                        onDoubleClick={e => this.doubleClicked(e)}
                        className={["ttd", alignCss, cell_font_family_css, cell_font_size_css,
                            cell_font_weight_css, cell_font_style_css, cell_text_decoration_css,
                            cell_border_top_css, cell_border_right_css, cell_border_bottom_css, cell_border_left_css,
                            cell_cell_filter_brightness_css].join(' ')}
                        rowSpan={_rowSpan}
                        colSpan={_colSpan}
                        style={{backgroundColor: this.props.commcellBackgroundColor}}
                    >
                        {this.getCommData(this.props.commValue, x, y,
                            executeFormula,this.props.commIsThousandsFormat,
                            this.props.commIsPercentageFormat,
                            this.props.commDecimalPlace
                        )}


                    </td>
                )

            } else {
                return (
                    <td className="ttd"
                        onClick={e => this.clicked(e)}
                        onDoubleClick={e => this.doubleClicked(e)}
                        className={["ttd", alignCss, cell_font_family_css, cell_font_size_css,
                            cell_font_weight_css, cell_font_style_css, cell_text_decoration_css,
                            cell_border_top_css, cell_border_right_css, cell_border_bottom_css, cell_border_left_css,
                            cell_cell_filter_brightness_css].join(' ')}
                        rowSpan={_rowSpan}
                        colSpan={_colSpan}
                        style={{backgroundColor: this.props.commcellBackgroundColor}}
                    >
                        {this.getCommDataInput(this.props.commValue)}
                    </td>
                )
            }
        }


    }
}
